<template>
  <view :class="ns.b()">
    <view :class="ns.b('logo')">
      <img :class="ns.b('logo-img')" src="@/static/logo.png" />
      <view :class="ns.b('title')">{{ title }}</view>
    </view>
    <uni-forms
      ref="formRef"
      :class="ns.b('form')"
      :modelValue="loginData"
      style="margin-left: 0"
      :rules="rules"
    >
      <uni-forms-item :class="ns.b('user')" name="username">
        <uni-easyinput
          clearable
          v-model="loginData.username"
          placeholderStyle="color:#fff;font-size:14px"
          :inputBorder="false"
          placeholder="请输入用户名"
          prefixIcon="auth"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item :class="ns.b('password')" name="password">
        <uni-easyinput
          show-password
          clearable
          type="password"
          v-model="loginData.password"
          :inputBorder="false"
          placeholder="请输入密码"
          prefixIcon="locked"
          placeholderStyle="color:#fff;font-size:14px"
        ></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view :class="ns.b('btns')">
      <button size="large" :class="ns.b('login-btn')" @click="login">
        登录
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useNamespace } from "@/use";
import { currentRoute } from "@/utils";
import { computed, reactive, ref } from "vue";
const ns = useNamespace(`login-view`);

const loading = ref(false);

const formRef = ref();

const loginData = reactive({
  username: "",
  password: "",
});

const title = computed(() => {
  return ibiz.env.AppTitle || "应用首页 ";
});

const rules = {
  username: { rules: [{ required: true, errorMessage: "请填写用户名" }] },
  password: { rules: [{ required: true, errorMessage: "请填写密码" }] },
};

const login = async () => {
  formRef.value.validate(async (err, data) => {
    if (!err) {
      const bol = await ibiz.auth.login(loginData.username, loginData.password);
      if (bol) {
        const { query } = currentRoute();
        uni.redirectTo({ url: query.redirect });
      }
    }
  });
};
</script>
<style scoped lang="scss">
$login-view: (
  background: #373447,
  login-btn-bkg: #312e3f,
  login-btn-bkg-hover: #312e3f,
);

@mixin login-view-form-item-style {
  position: relative;
  // @include flex(row, flex-start, center);

  height: 40%;
  margin-bottom: 0;
  font-size: rem(14px);
  line-height: 24px;
  border-bottom: rem(1px) solid #565366;

  ::v-deep .uni-forms-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep .uni-input-input {
    color: #fff !important;
  }

  ::v-deep .uni-easyinput__content {
    background: none !important;
    border: none !important;
  }
}

@include b(login-view) {
  @include set-component-css-var(login-view, $login-view);

  width: 100vw;
  height: 100vh;
  color: #fff;
  background: getCssVar(login-view, "background");

  @include b(login-view-logo) {
    height: 40%;
    @include flex(column, center, center);

    @include b(login-view-logo-img) {
      margin-top: 15%;
    }

    @include b(login-view-title) {
      margin-top: 5%;
      font-size: 16px;
    }
  }

  @include b(login-view-form) {
    height: 20%;
    padding: 0 10%;

    @include b(login-view-user) {
      background: transparent;

      @include login-view-form-item-style;
    }

    @include b(login-view-password) {
      background: transparent;

      @include login-view-form-item-style;
    }
  }

  @include b(login-view-btns) {
    height: 40%;
    padding: 0 10%;

    @include b(login-view-login-btn) {
      width: 100%;
      margin: 0;
      font-size: 15px;
      color: #fff;
      background: getCssVar(login-view, "login-btn-bkg");
      border: none;
      border-radius: 0;

      &:hover {
        background: getCssVar(login-view, "login-btn-bkg-hover");
      }
    }
  }
}
</style>
